<template>
  <div class="main">
    <h1>{{msg}}</h1>
    <h2 v-show="schoolName">App收到了学校名：{{schoolName}}</h2>
    <h2 v-show="studentName">App收到了学生名：{{studentName}}</h2>
    <h2 v-show="teacher.name&&teacher.sex">App收到了老师名：{{teacher.name}}，性别：{{teacher.sex}}</h2>
    <!--   通过父组件给子组件传递函数类型的props实现：子给父传递数据-->
    <School :getSchoolName="getSchoolName"></School>
    <!--        通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第一种写法：使用v-on或@)-->
    <Student v-on:showN="getStudentName"></Student>
    <!--      通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第二种写法：使用ref)  -->
    <Teacher ref="teacher"/>
  </div>
</template>

<script>
import School from "@/components/School";
import Student from "@/components/Student";
import Teacher from "@/components/Teacher";
export default {
  name: "App",
  data(){
    return{
      msg:"你好啊！",
      schoolName:"",
      studentName:"",
      teacher:{
        name:"",
        sex:""
      }
    }
  },
  components:{School,Student,Teacher},
  methods:{
    getSchoolName(name){
      this.schoolName=name
    },
    getStudentName(name){
      this.studentName=name
    },
    getTeacherName(name,...params){
      this.teacher.name=name
      this.teacher.sex=params[0]
    }
  },
  mounted() {
    this.$refs.teacher.$on('tName',this.getTeacherName)
  }
}
</script>

<style scoped>
.main{
  background-color: grey;
  padding: 5px;
}
</style>
